import React, { useState, useEffect } from 'react'
import { View, Button, Image, Text } from '@tarojs/components'
import { AtCard, AtButton, AtDivider, AtMessage } from 'taro-ui'
import './index.scss'
import { getCurrentInstance } from '@tarojs/taro'
import './index'
import EChart from 'techarts'
// 自定义构建的echarts
import * as echarts from './echarts'
import { getVideoHistoryDetail, getPersonalDetail } from '../../api/index'
import tag from 'src/components/tag'

interface PersonalTags {
  tagName: string
  tagType: number
}

interface PersonalDetail {
  face: string
  name: string
  OfficialVerifyDesc: string
  sign: string
  tags: Array<PersonalTags>
  fans: number
  archiveView: number //播放总数
  likes: number
  totalFavourite: number //收藏
  archiveCount: number //作品总数
  totalCount: number //充电总数
}

interface DurationType {
  row: string
  value: number
}

interface VideoHistoryDetailOrigin {
  view: Array<DurationType>
  danmaku: Array<DurationType>
  favourite: Array<DurationType>
  like: Array<DurationType>
  reply: Array<DurationType>
  share: Array<DurationType>
}
interface VideoHistoryDetailInc {
  viewInc: Array<DurationType>
  danmakuInc: Array<DurationType>
  favouriteInc: Array<DurationType>
  likeInc: Array<DurationType>
  replyInc: Array<DurationType>
  shareInc: Array<DurationType>
}

interface VideoHistoryDetail {
  origin: VideoHistoryDetailOrigin
  increase: VideoHistoryDetailInc
}

export default () => {
  let routerData = getCurrentInstance().router as any
  let {
    id,
    mid,
    pic,
    title,
    desc,
    danmaku,
    like,
    reply,
    favourite,
    view,
    tagList
  } = routerData.params

  const [tagVideoList, setTagList] = useState<Array<string>>(tagList.split(','))
  const [data, setData] = useState<VideoHistoryDetail>()
  const [personalDetail, setPersonalDetail] = useState<PersonalDetail>()
  const [current, setCurrent] = useState(0)
  const [current_2, setCurrent_2] = useState(0)
  const [propsData, setPropsData] = useState({
    id: 0,
    pic: '',
    title: '',
    desc: '',
    danmaku: 0,
    like: 0,
    reply: 0,
    favourite: 0,
    view: 0
  })

  const [option, setOption] = useState({
    title: {
      text: '数据分析图(单位:十万)',
      top: 0,
      left: 'center'
    },
    xAxis: {
      type: 'category',
      data: [] as Array<string>
    },
    yAxis: {
      type: 'value'
    },
    series: [
      {
        data: [] as Array<number>,
        type: 'line'
      }
    ]
  })

  const setUpVideoData = (tempdata) => {
    let data = tempdata?.slice()
    let xArea = [] as Array<string>
    let yArea = [] as Array<number>
    let unit = '单位: 个'

    let unitdata = data[0].value
    console.log('我是参考值', unitdata)

    let flag
    if (unitdata < 1000) {
      flag = 1
    } else if (unitdata > 1000 && unitdata < 10000) {
      flag = 2
      unit = '单位: 千'
    } else if (unitdata > 10000 && unitdata < 10000000) {
      flag = 3
      unit = '单位: 万'
    } else if (unitdata > 10000000 && unitdata < 100000000) {
      flag = 4
      unit = '单位: 千万'
    } else {
      flag = 5
      unit = '单位: 亿'
    }

    data.reverse().forEach((item) => {
      if (flag === 1) {
        xArea.push(item.row)
        yArea.push(item.value)
      } else if (flag === 2) {
        xArea.push(item.row)
        yArea.push(item.value / 1000)
      } else if (flag === 3) {
        xArea.push(item.row)
        yArea.push(item.value / 10000)
      } else if (flag === 4) {
        xArea.push(item.row)
        yArea.push(item.value / 10000000)
      } else if (flag === 5) {
        xArea.push(item.row)
        yArea.push(item.value / 100000000)
      }
    })

    setOption({
      title: {
        text: `数据分析图(${unit})`,
        top: 0,
        left: 'center'
      },
      xAxis: {
        type: 'category',
        data: xArea
      },
      yAxis: {
        type: 'value'
      },
      series: [
        {
          data: yArea,
          type: 'line'
        }
      ]
    })
  }

  useEffect(() => {
    ;(async () => {
      const {
        data: { data, errorCode, errorMessage }
      } = await getPersonalDetail({
        id: mid
      })
      if (!errorCode) {
        setPersonalDetail(data)
      } else {
        Taro.atMessage({
          type: 'error',
          message: errorMessage + ',请充值'
        })
      }
    })()
    setPropsData({
      id,
      pic,
      title,
      desc,
      danmaku,
      like,
      reply,
      favourite,
      view
    })
  }, [])

  useEffect(() => {
    let temp = data || {}
    if (Object.keys(temp).length === 0) {
      ;(async () => {
        const {
          data: { data, errorCode, errorMessage }
        } = await getVideoHistoryDetail({
          aid: id,
          type: 0
        })
        if (!errorCode) {
          setData(data)
          const { origin } = data
          setUpVideoData(origin.danmaku)
        } else {
          Taro.atMessage({
            message: errorMessage + '，请充值',
            type: 'error'
          })
        }
      })()
    }
    if (data) {
      const { increase, origin } = data
      if (current === 0) {
        if (current_2 === 0) {
          setUpVideoData(origin.danmaku)
        } else if (current_2 === 1) {
          setUpVideoData(origin.favourite)
        } else if (current_2 === 2) {
          setUpVideoData(origin.like)
        } else if (current_2 === 3) {
          setUpVideoData(origin.reply)
        } else if (current_2 === 4) {
          setUpVideoData(origin.share)
        } else if (current_2 === 5) {
          setUpVideoData(origin.view)
        }
      } else if (current === 1) {
        if (current_2 === 0) {
          setUpVideoData(increase.danmakuInc)
        } else if (current_2 === 1) {
          setUpVideoData(increase.favouriteInc)
        } else if (current_2 === 2) {
          setUpVideoData(increase.likeInc)
        } else if (current_2 === 3) {
          setUpVideoData(increase.replyInc)
        } else if (current_2 === 4) {
          setUpVideoData(increase.shareInc)
        } else if (current_2 === 5) {
          setUpVideoData(increase.viewInc)
        }
      }
    }
  }, [current, current_2])

  const onInit = (canvas, width, height, dpr) => {
    const chart = echarts.init(canvas, 'light', {
      width: width,
      height: height,
      devicePixelRatio: dpr // new
    })
    return chart // 必须return
  }

  return (
    <View>
      <View className="video-image-wrap">
        <Image src={propsData.pic} style={{ width: '100%' }}></Image>
      </View>
      <AtCard
        note={personalDetail?.sign}
        title={personalDetail?.name}
        thumb={personalDetail?.face}
      >
        <Text className="desc">{personalDetail?.OfficialVerifyDesc}</Text>
        <View>
          {personalDetail?.tags.map((item) => {
            try {
              return (
                <AtButton
                  size="small"
                  type="secondary"
                  className="personal-detail-tag"
                >
                  {item?.tagName}
                </AtButton>
              )
            } catch (error) {}
          })}
        </View>
      </AtCard>
      <AtDivider></AtDivider>
      <AtCard
        note={propsData.desc}
        title={'视频标题: ' + propsData.title?.slice(0, 15) + '...'}
      >
        {tagVideoList.map((item) => {
          try {
            return (
              <AtButton
                size="small"
                type="secondary"
                className="personal-detail-tag"
              >
                {item}
              </AtButton>
            )
          } catch (error) {}
        })}
      </AtCard>
      <AtDivider lineColor="#d6e4ef"></AtDivider>
      <AtCard title="视频数据">
        <View className="video-data-wrap">
          <Text>观看数: {(propsData.view / 10000).toFixed(2) + '万'}</Text>
          <Text>点赞数: {(propsData.like / 10000).toFixed(2) + '万'}</Text>
        </View>
        <View className="video-data-wrap">
          <Text>弹幕数: {(propsData.danmaku / 10000).toFixed(2) + '万'}</Text>
          <Text>评论数: {(propsData.reply / 10000).toFixed(2) + '万'}</Text>
        </View>
        <Text style={{ color: '#81b0d3' }}>收藏数: {propsData.favourite}</Text>
      </AtCard>
      <AtDivider lineColor="#d6e4ef"></AtDivider>
      <View className="btn-wrap">
        <AtButton
          type="secondary"
          size="small"
          className={current === 0 ? 'choose-btn' : 'scroll-btn'}
          onClick={() => setCurrent(0)}
        >
          总量
        </AtButton>
        <AtButton
          type="secondary"
          size="small"
          className={current === 1 ? 'choose-btn' : 'scroll-btn'}
          onClick={() => setCurrent(1)}
        >
          增量
        </AtButton>
      </View>
      <View className="btn-wrap">
        <AtButton
          type="secondary"
          size="small"
          className={current_2 === 0 ? 'choose-btn' : 'scroll-btn'}
          onClick={() => setCurrent_2(0)}
        >
          弹幕数
        </AtButton>
        <AtButton
          type="secondary"
          size="small"
          className={current_2 === 1 ? 'choose-btn' : 'scroll-btn'}
          onClick={() => setCurrent_2(1)}
        >
          收藏量
        </AtButton>
        <AtButton
          type="secondary"
          size="small"
          className={current_2 === 2 ? 'choose-btn' : 'scroll-btn'}
          onClick={() => setCurrent_2(2)}
        >
          点赞数
        </AtButton>
        <AtButton
          type="secondary"
          size="small"
          className={current_2 === 3 ? 'choose-btn' : 'scroll-btn'}
          onClick={() => setCurrent_2(3)}
        >
          评论数
        </AtButton>
        <AtButton
          type="secondary"
          size="small"
          className={current_2 === 4 ? 'choose-btn' : 'scroll-btn'}
          onClick={() => setCurrent_2(4)}
        >
          分享数
        </AtButton>
        <AtButton
          type="secondary"
          size="small"
          className={current_2 === 5 ? 'choose-btn' : 'scroll-btn'}
          onClick={() => setCurrent_2(5)}
        >
          观看数
        </AtButton>
      </View>
      <View className="line-chart">
        {/* 通过 option 设置数据 */}
        <EChart echarts={echarts} option={option} onInit={onInit} />
      </View>
      <AtDivider></AtDivider>
      <AtCard title="比例数据">
        <View className="card">
          <Text>
            每百次播放点赞:{' '}
            <Text className="color">{((like / view) * 100).toFixed(2)}</Text>
          </Text>
          <Text>
            每百次播放收藏:{' '}
            <Text className="color">
              {((favourite / view) * 100).toFixed(2)}
            </Text>
          </Text>
          <Text>
            每百次播放评论:{' '}
            <Text className="color">{((reply / view) * 100).toFixed(2)}</Text>
          </Text>
          <Text>
            每百次播放弹幕:{' '}
            <Text className="color">{((danmaku / view) * 100).toFixed(2)}</Text>
          </Text>
        </View>
      </AtCard>
    </View>
  )
}
